<template>
  <div class="divWarehouseAdd">
    <div class="divForm">
      <el-form ref="form" :model="formdate" :rules="rules">
        <el-row class="row1">
          <el-col class="span1" :span="6">
            <el-form-item prop="code" class="formitem1"  label="库区编码">
              <el-input v-model="formdate.code"  disabled placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
          <el-form-item prop="warehouseId" class="formitem1" label="所属仓库">
            <el-select v-model="formdate.warehouseId" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in option"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
            <el-form-item prop="name" class="formitem1" label="库区名称">
              <el-input v-model="formdate.name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
          <el-form-item prop="temperatureType" class="formitem1" label="温度类型">
            <el-select v-model="formdate.temperatureType" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in temperatureType"
                :key="item.temperatureType"
                :label="item.value"
                :value="item.temperatureType">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
          <el-form-item prop="bearingType" class="formitem1" label="承重类型">
            <el-select v-model="formdate.bearingType" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in bearingType"
                :key="item.bearingType"
                :label="item.value"
                :value="item.bearingType">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
          <el-form-item prop="useType" class="formitem1" label="用途属性">
            <el-select v-model="formdate.useType" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in useType"
                :key="item.useType"
                :label="item.value"
                :value="item.useType">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
            <el-form-item prop="personName" class="formitem1" label="负责人">
              <el-input v-model="formdate.personName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
            <el-form-item prop="phone" class="formitem1" label="联系电话">
              <el-input v-model="formdate.phone" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
            <el-form-item prop="status" class="formitem1" label="库区状态">
              <el-radio-group v-model="formdate.status">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="buttonBox">
      <button class="unimportanceButton" @click="$router.push('area')">返回</button>
      <button class="minorImportantButton" @click="submit">提交</button>
    </div>
    </div>
  </div>
</template>

<script>
import hireType from '@/constant/kuqumanage.js'
import { getKQ, list, addStore, editStroe } from '@/api/kulocation.js'
export default {
  data () {
    return {
      status: 1,
      option: '',
      statusId: hireType.hireType,
      temperatureType: hireType.temperature,
      bearingType: hireType.weighttype,
      useType: hireType.useType,
      value: '',
      formdate: {
        warehouseId: '',
        code: '',
        name: '',
        temperatureType: '', // 温度类型
        bearingType: '', // 承重类型
        useType: '', // 用途属性
        personName: '', // 负责人
        phone: '', // 联系方式
        status: ''
      }, // 仓库数据
      rules: {
        warehouseId: [{ required: true, trigger: 'blur' }],
        code: [{ required: true, trigger: 'blur' }],
        name: [{ required: true, trigger: 'blur', message: '请输入库区名称' }],
        temperatureType: [{ required: true, trigger: 'blur' }],
        bearingType: [{ required: true, trigger: 'blur' }],
        useType: [{ required: true, trigger: 'blur' }],
        personName: [{ required: true, message: '请输入负责人', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getKQ()
    this.list()
    if (this.$route.query.id) {
      this.getDetails()
    }
  },
  methods: {
    async getKQ () {
      const { data: { data } } = await getKQ()
      // console.log(data)
      this.formdate.code = data
    },
    async getDetails () {
      const { data: { data } } = await editStroe(this.$route.query)
      // console.log(data)
      this.formdate = data
    },
    async list () {
      const { data: { data } } = await list()
      // console.log(data)
      this.option = data
    },
    async submit () {
      if (this.formdate.id) {
        await editStroe(this.formdate)
      } else {
        await addStore(this.formdate)
      }
      this.$message.success('操作成功啦~')
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
  .divWarehouseAdd {
    height: 369px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    margin-top: 20px;
    margin-left: 29px;
    margin-right: 29px;
    padding-top: 31px;
    padding-bottom: 30px;
    .divForm {
      padding-left: 30px;
      padding-right: 30px;
    }
  }
  .el-col{
  height: 100px;
  }
  
  ::v-deep .el-form {
        .row1 {
          margin-left: -15px;
          margin-right: -15px;
          .span1{
            padding-left: 15px;
            padding-right: 15px;
            .formitem1 {
              margin-bottom: 30px;
              .el-form-item__label {
                line-height: 18px;
                padding-bottom: 10px !important;
                padding-left: 5px !important;
                font-size: 12px !important;
                font-family: PingFangSC,PingFangSC-Medium;
                font-weight: 500;
                color: #887e7e;
                padding: 0 12px 0 0;
                box-sizing: border-box;
              }
              .el-cascader {
                width: 100%;
              }
              .el-radio-group {
                  width: 100% !important;
                  display: block;
                  flex: 1;
                  flex-basis: auto;
                  overflow: auto;
                  box-sizing: border-box;
                  padding-top: 13px;
                  padding-bottom: 13px;
                }
            }
          }
        }
      }
  .buttonBox{
    padding: 25px 0 0;
    margin: 0 -30px -5px;
    border-top: 1px solid #f5efee;
    text-align: center;
    .unimportanceButton{
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC,PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
      width: 170px;
      margin: 0 15px;
    }
    .minorImportantButton{
      background: #ffb200;
      color: #332929;
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC,PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
      width: 170px;
      margin: 0 15px;
    }
  }
</style>
